<template>
  <div class="employees-container">
    <div class="app-container">
      <PageTools>
        <!-- 左边插槽 -->
        <span>本月: 社保在缴 公积金在缴</span>
        <!-- 右边插槽 -->
        <template #right>
          <el-button type="primary" size="small" @click="exportExcel">导出</el-button>
          <el-button type="primary" size="small" @click="$router.push('/import')">导入</el-button>
          <el-button type="primary" size="small" @click="showDialog=true">新增员工</el-button>
        </template>
      </PageTools>
      <!-- 表格数据 -->
      <el-card style="margin-top: 10px;">
        <el-table border :data="list">
          <el-table-column label="序号" type="index" sortable="" />
          <el-table-column label="姓名" prop="username" sortable="" />
          <!-- 添加员工头像 -->
          <el-table-column label="头像" sortable="">
            <template v-slot="{row}">
              <!-- 如果赋值给src的值是null，那么不会触发请求，那么也不会触发onerror事件 -->
              <img
                v-imgerror
                :src="row.staffPhoto"
                style="width: 50px;height:50px;border-radius: 25px;"
                alt=""
                @click="showCodeBox(row.staffPhoto)"
              >
            </template>
          </el-table-column>
          <!-- <el-table-column label="姓名" prop="username" sortable=""> -->
          <!-- <template v-slot="{row}">
              <ImageUpload :default-img="row.staffPhoto" :limit="1" />
            </template> -->
          <!-- </el-table-column> -->
          <el-table-column label="工号" prop="workNumber" sortable="" />
          <el-table-column label="聘用形式" :formatter="formatHireType" prop="formOfEmployment" sortable="" />
          <!-- <el-table-column label="聘用形式" prop="formOfEmployment" sortable=""> -->
          <!-- <template v-slot="{row}"> -->
          <!-- <div>{{ row.formOfEmployment | formatType }}</div> -->
          <!-- <div>{{ formatHireType(row.formOfEmployment) }}</div> -->
          <!-- </template> -->
          <!-- </el-table-column> -->
          <el-table-column label="部门" prop="departmentName" sortable="" />
          <el-table-column label="入职时间" prop="timeOfEntry" sortable="">
            <template v-slot="{row}">
              {{ row.timeOfEntry | formatTime }}
            </template>
          </el-table-column>
          <el-table-column label="账户状态" prop="enableState" sortable="">
            <template v-slot="{row}">
              <el-switch
                :inactive-value="0"
                :active-value="1"
                :value="row.enableState"
                active-color="green"
                inactive-color="lightgrey"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template v-slot="{row}">
              <el-button type="text" size="small" @click="$router.push('/employees/detail/'+row.id)">查看
              </el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="showRoleBox(row.id)">角色</el-button>
              <el-button type="text" size="small" @click="handleDelete(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div style="height: 60px; margin-top: 10px">
          <el-pagination
            :page-size="queryData.size"
            :current-page="queryData.page"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[ 2, 5 ,10]"
            @current-change="changePage"
            @size-change="changeSize"
          />
        </div>
      </el-card>
    </div>
    <!-- 新增员工弹窗 -->
    <AddEmployee :show-dialog.sync="showDialog" @on-success="onSuccessFn" />
    <!-- 分享展示, 预览的二维码的弹层 -->
    <el-dialog title="二维码" :visible="showCodeDialog" @close="showCodeDialog = false">
      <el-row type="flex" justify="center">
        <canvas ref="myCanvas" />
      </el-row>
    </el-dialog>
    <!-- 分配角色的弹窗 -->
    <AssignRole :user-id="userId" :show-role-dialog.sync="showRoleDialog" />
  </div>
</template>

<script>
import AddEmployee from './components/AddEmployee.vue'
import { reqGetEmployeeList, reqDelEmployee } from '@/api/employees'
import Types from '@/api/constant/employees'
import moment from 'moment'
import QrCode from 'qrcode'
import AssignRole from './components/assign-role.vue'
export default {
  name: 'Employess',
  // 注册组件
  components: {
    AddEmployee,
    AssignRole
  },
  // 局部过滤器 : 一些数据经过加工处理变成另一种数据
  // 过滤器 , 方式一
  filters: {
    // 过滤器名称
    formatType(value) {
    // value表示被过滤器处理的原始数据
      const info = Types.hireType.find(item => item.id === value)
      return info ? info.value : ''
    }
  },
  data() {
    return {
      // 分配角色的员工id
      userId: '',
      // 控制分配角色的弹窗
      showRoleDialog: false,
      // 控制显示弹窗
      showCodeDialog: false,
      // 控制新增员工弹窗的显示与隐藏
      showDialog: false,
      // 员工列表数据
      list: [],
      // 员工列表总数
      total: 0,
      // 分页
      queryData: {
        // 页码数
        page: 1,
        // 每页多少条
        size: 10
      }
    }
  },
  created() {
    this.loadEmployeeList()
  },
  methods: {
    // 控制分配角色的弹窗
    showRoleBox(id) {
      this.userId = id
      // 显示弹窗
      this.showRoleDialog = true
    },
    // 显示二维码弹窗
    showCodeBox(url) {
      // 判断url是否有值
      if (!url) return
      // 数据更新是异步 , 性能更好 , 不堵塞
      // 弹窗显示
      // 数据变成true之后 , 此时弹窗是否已经显示了? 没有
      // 必须保证弹窗打开后 ,才去获取DOM元素
      this.showCodeDialog = true
      this.$nextTick(() => {
        // 保证前面的数据更新的页面完成渲染后触发回调
        // 生成当前头像的url地址的二维码 , 渲染到弹唱里面
        const dom = this.$refs.myCanvas
        // 生成二维码操作
        // info转为二维码信息
        // dom是canvas的dom对象
        QrCode.toCanvas(dom, url)
      })
    },
    // 原始数据处理成导出的数据格式 : 二维数组
    getExportData(headers, rawData) {
      const result = []
      rawData.forEach(item => {
        const row = []
        for (const key in headers) {
          // 通过中的键key得到英文的键key
          const enkey = headers[key]
          // 通过英文的键key得到对应的值
          let attrValue = item[enkey]
          // 格式化时间
          if (['timeOfEntry', 'correctionTime'].includes(enkey)) {
            try {
              attrValue = moment(attrValue).format('YYYY-MM-DD')
            } catch (err) {
              console.log(err)
            }
          }
          // 聘用形式格式化
          if (enkey === 'formOfEmployment') {
            const info = Types.hireType.find(item => item.id === attrValue)
            attrValue = info ? info.value : ''
          }
          // push到row上
          row.push(attrValue)
        }
        result.push(row)
      })
      return result
    },
    // 导出excel表格
    async exportExcel() {
      const headers = {
        '姓名': 'username',
        '手机号': 'mobile',
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      // 获取需要导出的原始数据
      const rawData = await reqGetEmployeeList({
        page: 1,
        size: 10000
      })
      // 将原始数据处理成导出的数据格式
      const list = this.getExportData(headers, rawData.data.rows)
      // Object.keys() 是ES6提供的函数用于获取对象的所有的key , 最终形成数组
      const title = Object.keys(headers)
      import('@/vendor/Export2Excel').then(excel => {
        excel.export_json_to_excel({
          header: title, // 表头 必填
          data: list, // 具体数据 必填
          filename: 'excel-list', // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
      })
    },
    // 刷新列表
    onSuccessFn() {
      this.loadEmployeeList()
    },
    // 根据id删除员工
    async handleDelete(id) {
      try {
        const res = await this.$confirm('是否确定删除该员工', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        // 点击取消什么也不做
        if (res === 'cancel') return
        // 如果点击了确定,就删除 , 调用接口
        const ret = await reqDelEmployee(id)
        if (ret.code === 10000) {
        // 删除成功
        // 提示一下
          this.$message.success('删除员工成功')
          // 刷新列表
          this.loadEmployeeList()
        }
      } catch (error) {
        this.$message.error('删除员工失败')
      }
    },
    // 列表格式化 ,方式三 基于Element-UI组件库el-table
    formatHireType(row) {
      const info = Types.hireType.find(item => item.id === row.formOfEmployment)
      return info ? info.value : row.formOfEmployment
    },
    // // 列表格式化 , 方式二 作用插槽和方法
    // formatHireType(value) {
    //   const info = Types.hireType.find(item => item.id === value)
    //   return info ? info.value : value
    // },
    // 每页多少条切换时 , 触发
    changeSize(size) {
      this.queryData.page = 1
      this.queryData.size = size
      this.loadEmployeeList()
    },
    // 页码数切换时,触发
    changePage(page) {
      this.queryData.page = page
      this.loadEmployeeList()
    },
    // 获取员工列表数据
    async loadEmployeeList() {
      try {
        const res = await reqGetEmployeeList(this.queryData)
        if (res.code === 10000) {
          this.list = res.data.rows
          this.total = res.data.total
        }
        // 判断当前页数是否大于一 ,是否有数据
        if (this.queryData.page > 1 && !res.data.rows.length) {
          // 让当前页码数减一 , 返回到前一页
          this.queryData.page--
          // 并重新调用函数
          this.loadEmployeeList()
        }
      } catch (error) {
        this.$message.error('获取员工列表数据失败')
      }
    }
  }
}
</script>
